1
|
|
|
if (typeof(PhpDebugBar) == 'undefined') { |
|
|
|
|
2
|
|
|
// namespace |
3
|
|
|
var PhpDebugBar = {}; |
4
|
|
|
PhpDebugBar.$ = jQuery; |
5
|
|
|
} |
6
|
|
|
|
7
|
|
|
(function($) { |
8
|
|
|
|
9
|
|
|
/** |
10
|
|
|
* @namespace |
11
|
|
|
*/ |
12
|
|
|
PhpDebugBar.Widgets = {}; |
|
|
|
|
13
|
|
|
|
14
|
|
|
/** |
15
|
|
|
* Replaces spaces with and line breaks with <br> |
16
|
|
|
* |
17
|
|
|
* @param {String} text |
18
|
|
|
* @return {String} |
19
|
|
|
*/ |
20
|
|
|
var htmlize = PhpDebugBar.Widgets.htmlize = function(text) { |
21
|
|
|
return text.replace(/\n/g, '<br>').replace(/\s/g, " ") |
22
|
|
|
}; |
23
|
|
|
|
24
|
|
|
/** |
25
|
|
|
* Returns a string representation of value, using JSON.stringify |
26
|
|
|
* if it's an object. |
27
|
|
|
* |
28
|
|
|
* @param {Object} value |
29
|
|
|
* @param {Boolean} prettify Uses htmlize() if true |
30
|
|
|
* @return {String} |
31
|
|
|
*/ |
32
|
|
|
var renderValue = PhpDebugBar.Widgets.renderValue = function(value, prettify) { |
|
|
|
|
33
|
|
|
if (typeof(value) !== 'string') { |
34
|
|
|
if (prettify) { |
35
|
|
|
return htmlize(JSON.stringify(value, undefined, 2)); |
36
|
|
|
} |
37
|
|
|
return JSON.stringify(value); |
38
|
|
|
} |
39
|
|
|
return value; |
40
|
|
|
}; |
41
|
|
|
|
42
|
|
|
/** |
43
|
|
|
* Highlights a block of code |
44
|
|
|
* |
45
|
|
|
* @param {String} code |
46
|
|
|
* @param {String} lang |
47
|
|
|
* @return {String} |
48
|
|
|
*/ |
49
|
|
|
var highlight = PhpDebugBar.Widgets.highlight = function(code, lang) { |
|
|
|
|
50
|
|
|
if (typeof(code) === 'string') { |
51
|
|
|
if (typeof(hljs) === 'undefined') { |
|
|
|
|
52
|
|
|
return htmlize(code); |
53
|
|
|
} |
54
|
|
|
if (lang) { |
55
|
|
|
return hljs.highlight(lang, code).value; |
56
|
|
|
} |
57
|
|
|
return hljs.highlightAuto(code).value; |
58
|
|
|
} |
59
|
|
|
|
60
|
|
|
if (typeof(hljs) === 'object') { |
61
|
|
|
code.each(function(i, e) { hljs.highlightBlock(e); }); |
|
|
|
|
62
|
|
|
} |
63
|
|
|
return code; |
64
|
|
|
}; |
65
|
|
|
|
66
|
|
|
/** |
67
|
|
|
* Creates a <pre> element with a block of code |
68
|
|
|
* |
69
|
|
|
* @param {String} code |
70
|
|
|
* @param {String} lang |
71
|
|
|
* @return {String} |
72
|
|
|
*/ |
73
|
|
|
var createCodeBlock = PhpDebugBar.Widgets.createCodeBlock = function(code, lang) { |
|
|
|
|
74
|
|
|
var pre = $('<pre />'); |
75
|
|
|
$('<code />').text(code).appendTo(pre); |
76
|
|
|
if (lang) { |
77
|
|
|
pre.addClass("language-" + lang); |
78
|
|
|
} |
79
|
|
|
highlight(pre); |
80
|
|
|
return pre; |
81
|
|
|
}; |
82
|
|
|
|
83
|
|
|
var csscls = PhpDebugBar.utils.makecsscls('phpdebugbar-widgets-'); |
|
|
|
|
84
|
|
|
|
85
|
|
|
|
86
|
|
|
// ------------------------------------------------------------------ |
87
|
|
|
// Generic widgets |
88
|
|
|
// ------------------------------------------------------------------ |
89
|
|
|
|
90
|
|
|
/** |
91
|
|
|
* Displays array element in a <ul> list |
92
|
|
|
* |
93
|
|
|
* Options: |
94
|
|
|
* - data |
95
|
|
|
* - itemRenderer: a function used to render list items (optional) |
96
|
|
|
*/ |
97
|
|
|
var ListWidget = PhpDebugBar.Widgets.ListWidget = PhpDebugBar.Widget.extend({ |
98
|
|
|
|
99
|
|
|
tagName: 'ul', |
100
|
|
|
|
101
|
|
|
className: csscls('list'), |
102
|
|
|
|
103
|
|
|
initialize: function(options) { |
104
|
|
|
if (!options['itemRenderer']) { |
105
|
|
|
options['itemRenderer'] = this.itemRenderer; |
106
|
|
|
} |
107
|
|
|
this.set(options); |
108
|
|
|
}, |
109
|
|
|
|
110
|
|
|
render: function() { |
111
|
|
|
this.bindAttr(['itemRenderer', 'data'], function() { |
112
|
|
|
this.$el.empty(); |
113
|
|
|
if (!this.has('data')) { |
114
|
|
|
return; |
115
|
|
|
} |
116
|
|
|
|
117
|
|
|
var data = this.get('data'); |
118
|
|
|
for (var i = 0; i < data.length; i++) { |
119
|
|
|
var li = $('<li />').addClass(csscls('list-item')).appendTo(this.$el); |
120
|
|
|
this.get('itemRenderer')(li, data[i]); |
121
|
|
|
} |
122
|
|
|
}); |
123
|
|
|
}, |
124
|
|
|
|
125
|
|
|
/** |
126
|
|
|
* Renders the content of a <li> element |
127
|
|
|
* |
128
|
|
|
* @param {jQuery} li The <li> element as a jQuery Object |
129
|
|
|
* @param {Object} value An item from the data array |
130
|
|
|
*/ |
131
|
|
|
itemRenderer: function(li, value) { |
132
|
|
|
li.html(renderValue(value)); |
133
|
|
|
} |
134
|
|
|
|
135
|
|
|
}); |
136
|
|
|
|
137
|
|
|
// ------------------------------------------------------------------ |
138
|
|
|
|
139
|
|
|
/** |
140
|
|
|
* Displays object property/value paris in a <dl> list |
141
|
|
|
* |
142
|
|
|
* Options: |
143
|
|
|
* - data |
144
|
|
|
* - itemRenderer: a function used to render list items (optional) |
145
|
|
|
*/ |
146
|
|
|
var KVListWidget = PhpDebugBar.Widgets.KVListWidget = ListWidget.extend({ |
|
|
|
|
147
|
|
|
|
148
|
|
|
tagName: 'dl', |
149
|
|
|
|
150
|
|
|
className: csscls('kvlist'), |
151
|
|
|
|
152
|
|
|
render: function() { |
153
|
|
|
this.bindAttr(['itemRenderer', 'data'], function() { |
154
|
|
|
this.$el.empty(); |
155
|
|
|
if (!this.has('data')) { |
156
|
|
|
return; |
157
|
|
|
} |
158
|
|
|
|
159
|
|
|
var self = this; |
160
|
|
|
$.each(this.get('data'), function(key, value) { |
161
|
|
|
var dt = $('<dt />').addClass(csscls('key')).appendTo(self.$el); |
162
|
|
|
var dd = $('<dd />').addClass(csscls('value')).appendTo(self.$el); |
163
|
|
|
self.get('itemRenderer')(dt, dd, key, value); |
164
|
|
|
}); |
165
|
|
|
}); |
166
|
|
|
}, |
167
|
|
|
|
168
|
|
|
/** |
169
|
|
|
* Renders the content of the <dt> and <dd> elements |
170
|
|
|
* |
171
|
|
|
* @param {jQuery} dt The <dt> element as a jQuery Object |
172
|
|
|
* @param {jQuery} dd The <dd> element as a jQuery Object |
173
|
|
|
* @param {String} key Property name |
174
|
|
|
* @param {Object} value Property value |
175
|
|
|
*/ |
176
|
|
|
itemRenderer: function(dt, dd, key, value) { |
177
|
|
|
dt.text(key); |
178
|
|
|
dd.html(htmlize(value)); |
179
|
|
|
} |
180
|
|
|
|
181
|
|
|
}); |
182
|
|
|
|
183
|
|
|
// ------------------------------------------------------------------ |
184
|
|
|
|
185
|
|
|
/** |
186
|
|
|
* An extension of KVListWidget where the data represents a list |
187
|
|
|
* of variables |
188
|
|
|
* |
189
|
|
|
* Options: |
190
|
|
|
* - data |
191
|
|
|
*/ |
192
|
|
|
var VariableListWidget = PhpDebugBar.Widgets.VariableListWidget = KVListWidget.extend({ |
|
|
|
|
193
|
|
|
|
194
|
|
|
className: csscls('kvlist varlist'), |
195
|
|
|
|
196
|
|
|
itemRenderer: function(dt, dd, key, value) { |
197
|
|
|
$('<span />').attr('title', key).text(key).appendTo(dt); |
198
|
|
|
|
199
|
|
|
var v = value; |
200
|
|
|
if (v && v.length > 100) { |
201
|
|
|
v = v.substr(0, 100) + "..."; |
202
|
|
|
} |
203
|
|
|
var prettyVal = null; |
204
|
|
|
dd.text(v).click(function() { |
205
|
|
|
if (dd.hasClass(csscls('pretty'))) { |
206
|
|
|
dd.text(v).removeClass(csscls('pretty')); |
207
|
|
|
} else { |
208
|
|
|
prettyVal = prettyVal || createCodeBlock(value); |
209
|
|
|
dd.addClass(csscls('pretty')).empty().append(prettyVal); |
210
|
|
|
} |
211
|
|
|
}); |
212
|
|
|
} |
213
|
|
|
|
214
|
|
|
}); |
215
|
|
|
|
216
|
|
|
// ------------------------------------------------------------------ |
217
|
|
|
|
218
|
|
|
/** |
219
|
|
|
* Iframe widget |
220
|
|
|
* |
221
|
|
|
* Options: |
222
|
|
|
* - data |
223
|
|
|
*/ |
224
|
|
|
var IFrameWidget = PhpDebugBar.Widgets.IFrameWidget = PhpDebugBar.Widget.extend({ |
|
|
|
|
225
|
|
|
|
226
|
|
|
tagName: 'iframe', |
227
|
|
|
|
228
|
|
|
className: csscls('iframe'), |
229
|
|
|
|
230
|
|
|
render: function() { |
231
|
|
|
this.$el.attr({ |
232
|
|
|
seamless: "seamless", |
233
|
|
|
border: "0", |
234
|
|
|
width: "100%", |
235
|
|
|
height: "100%" |
236
|
|
|
}); |
237
|
|
|
this.bindAttr('data', function(url) { this.$el.attr('src', url); }); |
238
|
|
|
} |
239
|
|
|
|
240
|
|
|
}); |
241
|
|
|
|
242
|
|
|
|
243
|
|
|
// ------------------------------------------------------------------ |
244
|
|
|
// Collector specific widgets |
245
|
|
|
// ------------------------------------------------------------------ |
246
|
|
|
|
247
|
|
|
/** |
248
|
|
|
* Widget for the MessagesCollector |
249
|
|
|
* |
250
|
|
|
* Uses ListWidget under the hood |
251
|
|
|
* |
252
|
|
|
* Options: |
253
|
|
|
* - data |
254
|
|
|
*/ |
255
|
|
|
var MessagesWidget = PhpDebugBar.Widgets.MessagesWidget = PhpDebugBar.Widget.extend({ |
|
|
|
|
256
|
|
|
|
257
|
|
|
className: csscls('messages'), |
258
|
|
|
|
259
|
|
|
render: function() { |
260
|
|
|
var self = this; |
261
|
|
|
|
262
|
|
|
this.$list = new ListWidget({ itemRenderer: function(li, value) { |
263
|
|
|
var m = value.message; |
264
|
|
|
if (m.length > 100) { |
265
|
|
|
m = m.substr(0, 100) + "..."; |
266
|
|
|
} |
267
|
|
|
|
268
|
|
|
var val = $('<span />').addClass(csscls('value')).text(m).appendTo(li); |
269
|
|
|
if (!value.is_string || value.message.length > 100) { |
270
|
|
|
var prettyVal = value.message; |
271
|
|
|
if (!value.is_string) { |
272
|
|
|
prettyVal = null; |
273
|
|
|
} |
274
|
|
|
li.css('cursor', 'pointer').click(function() { |
275
|
|
|
if (val.hasClass(csscls('pretty'))) { |
276
|
|
|
val.text(m).removeClass(csscls('pretty')); |
277
|
|
|
} else { |
278
|
|
|
prettyVal = prettyVal || createCodeBlock(value.message, 'php'); |
279
|
|
|
val.addClass(csscls('pretty')).empty().append(prettyVal); |
280
|
|
|
} |
281
|
|
|
}); |
282
|
|
|
} |
283
|
|
|
|
284
|
|
|
if (value.label) { |
285
|
|
|
val.addClass(csscls(value.label)); |
286
|
|
|
$('<span />').addClass(csscls('label')).text(value.label).appendTo(li); |
287
|
|
|
} |
288
|
|
|
if (value.collector) { |
289
|
|
|
$('<span />').addClass(csscls('collector')).text(value.collector).appendTo(li); |
290
|
|
|
} |
291
|
|
|
}}); |
292
|
|
|
|
293
|
|
|
this.$list.$el.appendTo(this.$el); |
294
|
|
|
this.$toolbar = $('<div><i class="phpdebugbar-fa phpdebugbar-fa-search"></i></div>').addClass(csscls('toolbar')).appendTo(this.$el); |
295
|
|
|
|
296
|
|
|
$('<input type="text" />') |
297
|
|
|
.on('change', function() { self.set('search', this.value); }) |
298
|
|
|
.appendTo(this.$toolbar); |
299
|
|
|
|
300
|
|
|
this.bindAttr('data', function(data) { |
301
|
|
|
this.set({ exclude: [], search: '' }); |
302
|
|
|
this.$toolbar.find(csscls('.filter')).remove(); |
303
|
|
|
|
304
|
|
|
var filters = [], self = this; |
305
|
|
|
for (var i = 0; i < data.length; i++) { |
306
|
|
|
if (!data[i].label || $.inArray(data[i].label, filters) > -1) { |
307
|
|
|
continue; |
308
|
|
|
} |
309
|
|
|
filters.push(data[i].label); |
310
|
|
|
$('<a />') |
311
|
|
|
.addClass(csscls('filter')) |
312
|
|
|
.text(data[i].label) |
313
|
|
|
.attr('rel', data[i].label) |
314
|
|
|
.on('click', function() { self.onFilterClick(this); }) |
315
|
|
|
.appendTo(this.$toolbar); |
316
|
|
|
} |
317
|
|
|
}); |
318
|
|
|
|
319
|
|
|
this.bindAttr(['exclude', 'search'], function() { |
320
|
|
|
var data = this.get('data'), |
321
|
|
|
exclude = this.get('exclude'), |
322
|
|
|
search = this.get('search'), |
323
|
|
|
caseless = false, |
324
|
|
|
fdata = []; |
325
|
|
|
|
326
|
|
|
if (search && search === search.toLowerCase()) { |
327
|
|
|
caseless = true; |
328
|
|
|
} |
329
|
|
|
|
330
|
|
|
for (var i = 0; i < data.length; i++) { |
331
|
|
|
var message = caseless ? data[i].message.toLowerCase() : data[i].message; |
332
|
|
|
|
333
|
|
|
if ((!data[i].label || $.inArray(data[i].label, exclude) === -1) && (!search || message.indexOf(search) > -1)) { |
334
|
|
|
fdata.push(data[i]); |
335
|
|
|
} |
336
|
|
|
} |
337
|
|
|
|
338
|
|
|
this.$list.set('data', fdata); |
339
|
|
|
}); |
340
|
|
|
}, |
341
|
|
|
|
342
|
|
|
onFilterClick: function(el) { |
343
|
|
|
$(el).toggleClass(csscls('excluded')); |
344
|
|
|
|
345
|
|
|
var excludedLabels = []; |
346
|
|
|
this.$toolbar.find(csscls('.filter') + csscls('.excluded')).each(function() { |
347
|
|
|
excludedLabels.push(this.rel); |
348
|
|
|
}); |
349
|
|
|
|
350
|
|
|
this.set('exclude', excludedLabels); |
351
|
|
|
} |
352
|
|
|
|
353
|
|
|
}); |
354
|
|
|
|
355
|
|
|
// ------------------------------------------------------------------ |
356
|
|
|
|
357
|
|
|
/** |
358
|
|
|
* Widget for the TimeDataCollector |
359
|
|
|
* |
360
|
|
|
* Options: |
361
|
|
|
* - data |
362
|
|
|
*/ |
363
|
|
|
var TimelineWidget = PhpDebugBar.Widgets.TimelineWidget = PhpDebugBar.Widget.extend({ |
|
|
|
|
364
|
|
|
|
365
|
|
|
tagName: 'ul', |
366
|
|
|
|
367
|
|
|
className: csscls('timeline'), |
368
|
|
|
|
369
|
|
|
render: function() { |
370
|
|
|
this.bindAttr('data', function(data) { |
371
|
|
|
this.$el.empty(); |
372
|
|
|
if (data.measures) { |
373
|
|
|
for (var i = 0; i < data.measures.length; i++) { |
374
|
|
|
var measure = data.measures[i]; |
375
|
|
|
var m = $('<div />').addClass(csscls('measure')), |
376
|
|
|
li = $('<li />'), |
377
|
|
|
left = (measure.relative_start * 100 / data.duration).toFixed(2), |
378
|
|
|
width = Math.min((measure.duration * 100 / data.duration).toFixed(2), 100 - left); |
379
|
|
|
|
380
|
|
|
m.append($('<span />').addClass(csscls('value')).css({ |
381
|
|
|
left: left + "%", |
382
|
|
|
width: width + "%" |
383
|
|
|
})); |
384
|
|
|
m.append($('<span />').addClass(csscls('label')).text(measure.label + " (" + measure.duration_str + ")")); |
385
|
|
|
|
386
|
|
|
if (measure.collector) { |
387
|
|
|
$('<span />').addClass(csscls('collector')).text(measure.collector).appendTo(m); |
388
|
|
|
} |
389
|
|
|
|
390
|
|
|
m.appendTo(li); |
391
|
|
|
this.$el.append(li); |
392
|
|
|
|
393
|
|
|
if (measure.params && !$.isEmptyObject(measure.params)) { |
394
|
|
|
var table = $('<table><tr><th colspan="2">Params</th></tr></table>').addClass(csscls('params')).appendTo(li); |
395
|
|
|
for (var key in measure.params) { |
|
|
|
|
396
|
|
|
if (typeof measure.params[key] !== 'function') { |
397
|
|
|
table.append('<tr><td class="' + csscls('name') + '">' + key + '</td><td class="' + csscls('value') + |
398
|
|
|
'"><pre><code>' + measure.params[key] + '</code></pre></td></tr>'); |
399
|
|
|
} |
400
|
|
|
} |
401
|
|
|
li.css('cursor', 'pointer').click(function() { |
402
|
|
|
var table = $(this).find('table'); |
403
|
|
|
if (table.is(':visible')) { |
404
|
|
|
table.hide(); |
405
|
|
|
} else { |
406
|
|
|
table.show(); |
407
|
|
|
} |
408
|
|
|
}); |
409
|
|
|
} |
410
|
|
|
} |
411
|
|
|
} |
412
|
|
|
}); |
413
|
|
|
} |
414
|
|
|
|
415
|
|
|
}); |
416
|
|
|
|
417
|
|
|
// ------------------------------------------------------------------ |
418
|
|
|
|
419
|
|
|
/** |
420
|
|
|
* Widget for the displaying exceptions |
421
|
|
|
* |
422
|
|
|
* Options: |
423
|
|
|
* - data |
424
|
|
|
*/ |
425
|
|
|
var ExceptionsWidget = PhpDebugBar.Widgets.ExceptionsWidget = PhpDebugBar.Widget.extend({ |
|
|
|
|
426
|
|
|
|
427
|
|
|
className: csscls('exceptions'), |
428
|
|
|
|
429
|
|
|
render: function() { |
430
|
|
|
this.$list = new ListWidget({ itemRenderer: function(li, e) { |
431
|
|
|
$('<span />').addClass(csscls('message')).text(e.message).appendTo(li); |
432
|
|
|
if (e.file) { |
433
|
|
|
$('<span />').addClass(csscls('filename')).text(e.file + "#" + e.line).appendTo(li); |
434
|
|
|
} |
435
|
|
|
if (e.type) { |
436
|
|
|
$('<span />').addClass(csscls('type')).text(e.type).appendTo(li); |
437
|
|
|
} |
438
|
|
|
if (e.surrounding_lines) { |
439
|
|
|
var pre = createCodeBlock(e.surrounding_lines.join(""), 'php').addClass(csscls('file')).appendTo(li); |
440
|
|
|
li.click(function() { |
441
|
|
|
if (pre.is(':visible')) { |
442
|
|
|
pre.hide(); |
443
|
|
|
} else { |
444
|
|
|
pre.show(); |
445
|
|
|
} |
446
|
|
|
}); |
447
|
|
|
} |
448
|
|
|
}}); |
449
|
|
|
this.$list.$el.appendTo(this.$el); |
450
|
|
|
|
451
|
|
|
this.bindAttr('data', function(data) { |
452
|
|
|
this.$list.set('data', data); |
453
|
|
|
if (data.length == 1) { |
454
|
|
|
this.$list.$el.children().first().find(csscls('.file')).show(); |
455
|
|
|
} |
456
|
|
|
}); |
457
|
|
|
|
458
|
|
|
} |
459
|
|
|
|
460
|
|
|
}); |
461
|
|
|
|
462
|
|
|
|
463
|
|
|
})(PhpDebugBar.$); |
|
|
|
|
464
|
|
|
|